<template>
    <div class="imgNavDetail">
        <p class="header_detail">魔方</p>
        <div class="detail">
           <p class="form_title">选择魔方排版</p>
            <div class="nav_box">
                <ul>
                    <li v-for='(item,index) in navList' :class="{'activeLi':activeNav==index}" :key='index' @click='changeNavList(index,item.number)'>
                        <img :src="activeNav==index ? item.activeIcon:item.icon">
                    </li>
                </ul>
            </div>
        </div>
        <div class="detail">
             <div class="detail_content">    
                <p class="form_title">布局</p>
                <p class="explain_text">
                    · 选择布局的模块在设置其中的图片，图片请保持一致，否则将被裁剪
                </p>
            </div>
            <div class="flex_content">
                <!-- // 前面1，2，3 -->
                <ul  :class="[navDetail.type,navDetail.type+navDetail.number]">
                    <li v-for='(item,index) in navDetail.number' :class="{'activeLi':detailActiveIndex == index}"  @click='changeDetailActive(index)' :key='index'>
                        <span v-if="navDetail.type == 'column'&&!imgList[index].imageUrl">宽度{{750/navDetail.number}}像素</span>
                        <span v-if="navDetail.type== 'square'&&!imgList[index].imageUrl ">375*375像素</span> 
                        <span v-if=" (navDetail.type=='rect_square' || navDetail.type=='square_rect')&&!imgList[index].imageUrl"> {{index==0 ? '375*750':'375*375'}}像素</span> 
                        <span v-if="navDetail.type=='rect_square_top'&&!imgList[index].imageUrl"> {{index==0 ? '750*375':'375*375'}}像素</span> 
                        <span v-if="navDetail.type=='rect_top'&&!imgList[index].imageUrl">750*375像素</span> 
                        <img :src="imgList[index].imageUrl" class="overImg" alt="">
                    </li>
                </ul>
            </div>
        </div> 

       

        <div class="detail_content">
            <ul>
                <li >
                    <div class="imgBox">
                        <div class="left">
                            <div class="left_imgs" >
                                <el-upload
                                    class="avatar-uploader"
                                    action='#'
                                    :auto-upload="false"
                                    :show-file-list="false"
                                    :on-change='getImg'
                                    :on-remove="handleRemove"
                                    :http-request="uploadImg"
                                >
                                    <img v-if="imgList[detailActiveIndex].imageUrl" :src="imgList[detailActiveIndex].imageUrl" class="avatar">
                                    <i  v-if='!imgList[detailActiveIndex].imageUrl' class="el-icon-plus avatar-uploader-icon"><span class="upload_text">添加图片</span></i>
                                    <div class="img_loading" v-if='imgList[detailActiveIndex].imageUrl'>
                                        <p>更换图片</p> 
                                    </div>
                                </el-upload>
                            </div>
                        </div> 
                        <div class="jumpUrlBox">
                            <span>跳转方向：</span>    
                             <el-select v-model='imgList[detailActiveIndex].jumpType' @change='changeToJump(imgList[detailActiveIndex].jumpType)'>
                                <el-option value='1' label='跳转链接'></el-option>
                                <el-option value='2' label='跳转模块'></el-option>
                                <!-- <el-option value='3' label='咨询弹窗'></el-option>
                                <el-option value='4' label='弹窗配置'></el-option> -->
                            </el-select>
                        </div>
                    </div>
                     <el-form  ref="form" label-position="left"   label-width="80px">
                            <!-- <el-form-item label='跳转链接：' v-if='imgList[detailActiveIndex].jumpType==1' >
                                <el-input v-model='imgList[detailActiveIndex].jumpUrl'  @change="toParent"  ></el-input>
                            </el-form-item> -->
                            <el-form-item label='小程序链接：' label-width="100px"   v-if='imgList[detailActiveIndex].jumpType==1' >
                                <!-- <el-input v-model='imgList[detailActiveIndex].wxJumpUrl'  @change="toParent"  ></el-input> -->
                                <c-linkselect v-model="imgList[detailActiveIndex].wxJumpUrl"  @change="toParent"></c-linkselect >

                            </el-form-item>
                            <el-form-item  label='跳转模块：' v-if='imgList[detailActiveIndex].jumpType==2'   >
                                <el-select v-model='imgList[detailActiveIndex].jumpID' @change='toParent'>
                                    <el-option v-for="(Model,indexs) in ModelList " :key='indexs' :value='Model.id' :label='Model.name'></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item v-if='imgList[detailActiveIndex].jumpType==4' label='弹窗背景：'>
                                <div class="uploadImg uploadFormImg"   @click='changeActiveIndex(detailActiveIndex)'>
                                    <div class="delete" @click='clearItemImg(detailActiveIndex)' v-if='imgList[detailActiveIndex].dialogUrl'></div>
                                    <el-upload
                                        class="avatar-uploader"
                                        action="#"
                                        :auto-upload="false"
                                        :show-file-list="false"
                                        :on-change="getDialogImg"
                                        :on-remove="handleRemove"
                                        :http-request="uploadImg"
                                    >
                                    <img v-if="imgList[detailActiveIndex].dialogUrl" :src="imgList[detailActiveIndex].dialogUrl" class="avatar" />
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    <div class="img_loading">
                                        <p v-if='!imgList[detailActiveIndex].dialogUrl'>添加图片</p> 
                                    </div>
                                    </el-upload>
                                </div>
                                <el-button v-if='imgList[detailActiveIndex].dialogUrl'  @click='showDialog(detailActiveIndex)'>弹窗演示</el-button>
                            </el-form-item>
                            <el-form-item label='H5弹窗跳转地址：' label-width='140px' v-if='imgList[detailActiveIndex].jumpType==4'>
                                <el-input v-model='imgList[detailActiveIndex].dialogJumpUrl'  @change="toParent"  ></el-input>
                            </el-form-item>
                            <el-form-item label='小程序弹窗跳转地址：' label-width='150px' v-if='imgList[detailActiveIndex].jumpType==4'>
                                <el-input v-model='imgList[detailActiveIndex].dialogWxJumpUrl'  @change="toParent"  ></el-input>
                            </el-form-item>
                        </el-form>
                </li>
            </ul>
        </div>
        <div class="detail detail_set">
            <p class="form_title">上边框距离  <span>(0为贴合，最大100像素)</span></p>
            <el-slider
                v-model="data.paddingTop"
                show-input
                :max='100'
                :step="1"
                @change='toParent'>
            </el-slider>
            <p class="form_title">下边框距离  <span>(0为贴合，最大100像素)</span></p>
            <el-slider
                v-model="data.paddingBottom"
                show-input
                :max='100'
                :step="1"
                @change='toParent'>
            </el-slider>
            <p class="form_title">布局内图片间隙  <span>(0为贴合，最大100像素)</span></p>
            <el-slider
                v-model="data.spaceSize"
                show-input
                :max='100'
                :step="1"
                @change='toParent'>
            </el-slider>
        </div>
         <div  class="eventBus">
            <p class="event_title" >事件（选填）</p>
            <el-input @change='toParent' v-model='data.event' :disabled="data.eventChecked" placeholder="请输入事件ID"></el-input>
        </div>
    </div>
</template>
<script>
import { uploadImg } from 'api/upload'
export default {
    data() {
        return {
            data: {
                number:4,
            },
            imgList:[{id:1,imageUrl:'',jumpUrl:''},{id:2,imageUrl:'',jumpUrl:''}],
            activeUploadIndex:0,
            detailActiveIndex:0,
            activeNav:0,
            navDetail:{
                number:2,
                type:'column',
            },
            navList:[
                {
                    number:2,
                    type:'column',
                    icon:require('@/assets/img/editContent/layout-icon-type-01-nor.png'),
                    activeIcon:require('@/assets/img/editContent/layout-icon-type-01-sel.png')
                },
                {
                    number:3,
                    type:'column',
                    icon:require('@/assets/img/editContent/layout-icon-type-02-nor.png'),
                    activeIcon:require('@/assets/img/editContent/layout-icon-type-02-sel.png')
                },
                 {
                    number:4,
                    type:'column',
                    icon:require('@/assets/img/editContent/layout-icon-type-03-nor.png'),
                    activeIcon:require('@/assets/img/editContent/layout-icon-type-03-sel.png')
                },
                {
                    number:4,
                    type:'square',
                    icon:require('@/assets/img/editContent/layout-icon-type-04-nor.png'),
                    activeIcon:require('@/assets/img/editContent/layout-icon-type-04-sel.png')
                },
                {
                    number:3,
                    type:'rect_square', 
                    icon:require('@/assets/img/editContent/layout-icon-type-05-nor.png'),
                    activeIcon:require('@/assets/img/editContent/layout-icon-type-05-sel.png')
                },
                {
                    number:3,
                    type:'square_rect',
                    icon:require('@/assets/img/editContent/layout-icon-type-06-nor.png'),
                    activeIcon:require('@/assets/img/editContent/layout-icon-type-06-sel.png')
                },
                {
                    number:3,
                    type:"rect_square_top",
                    icon:require('@/assets/img/editContent/layout-icon-type-07-nor.png'),
                    activeIcon:require('@/assets/img/editContent/layout-icon-type-07-sel.png')
                },
                {
                    number:2,
                    type:"rect_top",
                    icon:require('@/assets/img/editContent/layout-icon-type-08-nor.png'),
                    activeIcon:require('@/assets/img/editContent/layout-icon-type-08-sel.png')
                },
                // {
                //     number:2,
                //     type:"define",
                //     icon:require('@/assets/img/editContent/layout-icon-type-09-nor.png'),
                //     activeIcon:require('@/assets/img/editContent/layout-icon-type-09-sel.png')
                // },
                
            ],
            imgHeight:0,
            ModelList:[],
            activeIndex:null,  // 当前选中的index 元素
        };
    },
    props: {
        propData: {
            type: Object
        },
        totalList:{
            type:Array
        },
    },
    methods: {
        //获取form 表单中的img
        getDialogImg(val){
            let that = this;
            let infoId = this.$route.query.id;
            var file = val.raw;
            var formdata=new FormData();// 创建form对象
            formdata.append('file',file,file.name);
            uploadImg(formdata).then(res=>{
                if(res){
                    that.imgList[that.activeIndex].dialogUrl=res;
                    that.toParent();
                }
            })
        },
        clearItemImg(index){
            this.imgList[index].dialogUrl = '';
            this.toParent();
        },
        showDialog(index){
            if(!this.imgList[index].dialogUrl){
                return ;
            }
            let data  = {
                url:this.imgList[index].dialogUrl
            }
            this.$emit('showDialog',data)
        },
        changeActiveIndex(index){
            this.activeIndex  = index;
        },
        changeToJump(type){
            if(type==1){ //跳转链接
                this.data.jumpID = '';
            }else if(type ==2){  //模块跳转
                this.data.jumpUrl = '';
                this.data.wxJumpUrl = ''
            }else{
                this.data.jumpID = '';
                this.data.jumpUrl = '';
                this.data.wxJumpUrl = ''
            }
            this.toParent();
        },
        // 点击方块 选择上传图片
        changeDetailActive(index){
            this.detailActiveIndex = index;
        },
        clearImg(){
            this.data.bgUrl = '';
            this.toParent();
        },
        // 导航 数量
        changeNavList(index,val){
            this.activeNav =index;
            this.detailActiveIndex = 0;
            this.imgList=[];
            for(let i=0;i<val;i++){
                this.imgList.push({id:i+1,imageUrl:'',jumpUrl:''})
            };
            this.navDetail = {
                number:this.navList[index].number,
                type:this.navList[index].type
            }
            
            this.toParent();
        },
        uploadImg(){

        },
        handleRemove(){

        },
         // 获取当前点击的upload
        getIndex(index){
            if(this.activeUploadIndex ==index){
                return;
            }
            this.activeUploadIndex = index;
        },
        // 背景图
        getBg(val){
            // let that = this;
            // let file = val.raw;
            // var reader = new FileReader();
            // reader.readAsDataURL(file);
            // reader.onload =(e)=>{ 
            //     that.data.bgUrl=e.target.result;
            //     that.toParent();
            // }


            let that = this;
            let infoId = this.$route.query.id;
            var file = val.raw;
            var formdata=new FormData();// 创建form对象
            formdata.append('file',file,file.name);
            uploadImg(formdata).then(res=>{
                if(res){
                    that.data.bgUrl= res;
                    that.toParent();
                }
            })
        },
        getImg(val){
            let that = this;
            let infoId = this.$route.query.id;
            var file = val.raw;
            var formdata=new FormData();// 创建form对象
            formdata.append('file',file,file.name);
            uploadImg(formdata).then(res=>{
                if(res){
                    that.imgList[that.detailActiveIndex].imageUrl=res;
                    var image = new Image()
                    image.src = res;
                    image.onload =function(){
                        var naturalWidth = image.width;
                        var naturalHeight = image.height;
                        if(that.navDetail.type== 'column'){
                            // 只根据第一张图的大小来
                            var scaleWidth =0;
                            if(that.detailActiveIndex==0){
                                scaleWidth = 375/that.navDetail.number;
                                var naturalHeight2 = image.height*scaleWidth/naturalWidth;
                                that.data.imgHeight = naturalHeight2;
                                that.data.naturalHeight = naturalHeight;
                                that.data.maxImgHeight = naturalHeight2*2;
                                that.data.scale = naturalWidth/naturalHeight
                            }
                            that.imgList[that.detailActiveIndex].naturalHeight = naturalHeight;
                        }else{
                            if(that.navDetail.type== 'rect_square_top'){
                            that.imgList[that.detailActiveIndex].heightMore = naturalHeight>2*naturalWidth;
                            }
                            else{
                                if(naturalHeight>naturalWidth){
                                    that.imgList[that.detailActiveIndex].heightMore = true;
                                }else{
                                    that.imgList[that.detailActiveIndex].heightMore = false;
                                }
                            }
                            
                            that.data.imgHeight = 375;
                        }
                        that.toParent();
                    }
                }
            })    
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        
        goUpStep(index,bool){  //向上 ，向下 bool:true-上 false:下
            let index1,index2;
            if(bool){ //向上
                if(index==0){
                return ;
                }
                index1 = index;
                index2 =  index1-1;
            }else{ //向下
                if(index ==this.imgList.length-1){
                return;
                }
                index1 = index;
                index2 = index1+1;
            }
            this.imgList.splice(index2,1,...this.imgList.splice(index1, 1 , this.imgList[index2]));
        },
        // 删除 
        deleteRow(index){
            this.imgList.splice(index,1)
        },
        // 添加 
        addRow(){
            if(this.imgList.length==5){
                return; 
            }
            this.imgList.push({
                id:this.imgList.length+1
            });
        },
        toParent() {
            var navDetail = {
                type:this.navList[this.activeNav].type,
                number:this.navList[this.activeNav].number
            }
            if(this.navDetail.type !='column'){
                this.data.imgHeight = 375;
            }else{
                 this.data.imgHeight = 200;
            }
            let data = {    
                ...this.data,
                activeNav:this.activeNav,
                imgList:this.imgList,
                navDetail:navDetail
            };
            this.$emit("toParent", data);
        }
    },
    watch: {
        propData: function(val) {
            this.data = JSON.parse(JSON.stringify(this.propData));
        },
    },
    mounted() {
        this.data = JSON.parse(JSON.stringify(this.propData));
        this.imgList  = this.data.imgList
        this.navDetail = this.data.navDetail
        this.activeNav = this.data.activeNav
         let arr = []; 
        this.totalList.map((val)=>{
            if(val.type!='BottomFloat' && val.type!='Floatwin'){
                arr.push(val);
            }
        });
        this.ModelList = arr.length &&  arr.map((val,index)=>{
            return {
                id:val.id,
                name:`${val.moduleName} - ${index+1}`
            }
        })
        this.toParent();
        console.log(this.propData, "接收到的参数");
    }
};
</script>
<style lang="less" scoped>
.imgNavDetail{
    margin-bottom:40px;
}
.header_detail{
    height:50px;
    line-height:50px;
    // border-bottom:1px solid #E4E4E4;
    font-size: 16px;
    color: #000000;
    padding-left:16px;
}
.detail{
    padding: 0 16px 0 16px;
    border-top: 1px solid #E4E4E4;
    font-size: 14px;
    color: #666666;
    .nav_box{
        width:100%;
        height:80px;
        position:relative;
        ul{
            width:100%;
            height:80px;
            overflow: hidden;
            li{
                float:left;
                width:100/6%;
                height:40px;
                position:relative;
                border:1px solid #E4E4E4;
                box-sizing: border-box;
                display:flex;
                justify-content: center;
                align-items: center;    
            }
            .activeLi{
               border:1px solid #FF8244; 
            }
        }
    }
    
    .form_title{
        position:relative;
        left:0;
        margin:20px 0 16px 0;
        span{
            color: #888888;
        }
    }
    .detail_explain_title{
        font-size: 14px;
        margin:10px 0;
        color: #666666;
    }
    .detail_explain{
        font-size: 12px;
        line-height: 17px;
        color: #888888;
    }
}
.detail_set{
    padding: 0 16px 0 25px;
    .form_title{
        left:-10px;
    }
}
.detail_content{
    width:100%;
    margin-bottom:10px;
    .explain_text{
        font-size: 12px;
        line-height: 17px;
        color: #888888;
    }
    ul{
        width:100%;
        height:100%;
        margin-top: 20px;
    }
    li{
        width:100%;
        margin-top: 2px;
        background:#F7F7F7;
    }
    .imgBox{
        width:100%;
        height:100%;
        display:flex;
        justify-content: space-between;
        // align-items: center;
        position:relative;
        padding:10px 0 ;
        .jumpUrlBox{
            font-size:14px;
            line-height:24px;
            margin-right:16px;
            margin-top:10px;
        }
        .left{
            width:150px;
            height:90px;
            display:flex;
            justify-content: center;
            align-items: center;
            .left_btns{
                width:50px;
                height:100%;
                flex-direction: column;
                display: flex;
                align-items: center;
                justify-content: center;
                .top_btn{
                    margin-bottom:10px;
                }
            }
            .left_imgs{
                width:72px;
                height:62px;
                position:relative;
                .img_loading{
                    width:100%;
                    height:100%;
                    position:absolute;
                    background:rgba(0, 0, 0, 0.6);
                    top: 0;
                    font-size: 12px;
                    color: #FFFFFF;
                    display:none;
                    justify-content: center;
                    align-items:center;
                }
                .el-upload:hover .img_loading{
                    display:flex; 
                }   
                .upload_text{
                    font-size: 12px;
                    line-height: 17px;
                }
                /deep/ .avatar-uploader .el-upload {
                    border: 1px dashed #FF8244;
                    border-radius: 6px;
                    cursor: pointer;
                    position: relative;
                    overflow: hidden;
                    
                }
                /deep/ .avatar-uploader .el-upload:hover {
                    // border-color: #FF8244;
                }
                /deep/.avatar-uploader-icon {
                    font-size: 22px;
                    color:#FF8244;
                    width:62px;
                    height:62px;
                    // line-height: 98px;
                    display:flex;
                    justify-content: center;
                    align-items:center;
                    flex-direction: column;
                }
                /deep/.avatar {
                    width:62px;
                    height:62px;
                    display: block;
                }
            }
        }
        .center{
            width:250px;
            height:100px;
        }
        .right{
            width:14px;
            height:14px;
            position:absolute;
            top: 8px;
            right:6px;
            background:url('~@/assets/img/editContent/icon-ashbin-nor.png') center center/14px 14px  no-repeat;
        }
        .right:hover{
            background:url('~@/assets/img/editContent/icon-ashbin-hov.png') center center/14px 14px  no-repeat;                    
        }
    }
    .addBtns{
        width:calc(100% - 32px);
        margin-left: 16px;
        text-align:center;
        line-height:40px;
        border:1px solid #FF8244;
        box-sizing: border-box;
        color:#FF8244;
        font-size: 14px;
        margin-top: 10px;
        margin-bottom:20px;
        cursor: pointer;
    }
}

// 都是竖着的
.column,.rect_top{
    width:100%;
    // height:100%;
    overflow: hidden;
    li{
        border:1px solid #E4E4E4;
        box-sizing: border-box;
        text-align:center;
        // line-height: 144px;
        float:left;
        display:flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }
    .activeLi{
        border:1px solid #FF8244; 
    }
}
.rect_top{
    li{
        height:144px;
        width:100%;
    }
}
.column4 li{
  width:25%; 
  height: 72px;
}
.column3 li{
  width:100/3%;
  height:288/3px;  
}
.column2 li{
  width:50%;  
  height:144px;
}   
// 正方形
.square{
    width:100%;
    overflow: hidden;
    li{
        height:144px;
        width:50%;
        border:1px solid #E4E4E4;
        box-sizing: border-box;
        text-align:center;
        // line-height: 144px;
        float:left;
        display:flex;
        justify-content: center;
        align-items: center;  
        overflow: hidden;
    }
    .activeLi{
        border:1px solid #FF8244; 
    }
}
//长左 正右边
.rect_square,.square_rect,.rect_square_top{
    width:100%;
    height:288px;
    overflow: hidden;
    li{
        width:50%;
        height:50%;
        border:1px solid #E4E4E4;
        box-sizing: border-box;
        text-align:center;
        // line-height: 144px;
        // float:left;
        display:flex;
        justify-content: center;
        align-items: center; 
        overflow: hidden;
    }
    .activeLi{
        border:1px solid #FF8244; 
    }
    li:nth-child(1){
        width:50%;
        height:100%;
    }
}
.rect_square li{
    float:left;
}
.square_rect{
    li{
        float:left;
    }
    li:nth-child(1){
        width:50%;
        height:50%;
    }
    li:nth-child(2){
        width:50%;
        height:100%;
        float:right;
    }
}
////长右 正左
.rect_square_top{
    li{
        float:left;
    }
    li:nth-child(1){
        width:100%;
        height:50%;
    }
}
.overImg{
    height:100%;
    width:auto;
}
// 竖着的长方形


/deep/.el-form-item {
    height: auto;
    display: block;
}
/deep/.el-form-item__content{
    height:auto;
}
/deep/.el-slider__bar{
    background-color:#FF8244;
}
/deep/.el-slider__button{
    border: 2px solid #FF8244;
}
 .uploadImg{
        width:100%;
        height:auto;
        position:relative;
        padding:24px 16px 17px 16px;
        margin-top:16px;
        box-sizing: border-box;
        background:#F7F7F7;
        line-height:35px;
        font-size:14px;
        color:#666666;
        margin-bottom:20px;
        .delete{
            width:14px;
            height:14px;
            position:absolute;
            top: 8px;
            right:6px;
            z-index: 10;
            background:url('~@/assets/img/editContent/icon-ashbin-nor.png') center center/14px 14px  no-repeat;
        }
        .delete:hover{
            background:url('~@/assets/img/editContent/icon-ashbin-hov.png') center center/14px 14px  no-repeat;                    
        }
         /deep/ .avatar-uploader .el-upload {
            border: 1px dashed #FF8244;
            box-sizing: border-box;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            width:100%;
            height:84px;     
            display:flex;
            justify-content: center;
            align-items:center;
            flex-direction: column;
            color:#FF8244;
        }
        /deep/ .avatar-uploader .el-upload:hover {
            // border-color: #FF8244;
        }
        /deep/.avatar-uploader-icon {
            font-size: 22px;  
            color:#FF8244;
        }
        /deep/.avatar {
            width:100%;
            height:84px;
            display: block;
        }
    }
    .eventBus{
        font-size: 14px;
        padding:5px 16px 0 10px;
        line-height: 40px;
        .event_title{
        //    margin-bottom:10px;
        }
    }
    .uploadFormImg{
        padding:0 16px 0 0;
        margin-bottom:10px;
        .delete{
            top:0;
            right:0;
        } 
    }
    .el-form{
        padding:0 16px;
        padding-bottom:10px;
    }
    .el-form-item {
        margin: 10px 0 10px 0;
        height: auto;
        display: block;
    }
    /deep/.el-form-item__content{
        height:auto;
    }
</style>